<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_detail.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="./image/p7.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个div仅仅用于占位，将下列三个a标签挤到右边，而无显示作用。 -->
        <div class="space"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <div class="card">
                <!-- 用户头像 -->
                <img src="./image/p8.jpg" alt="">
                <!-- 用户名 -->
                <h3>学Java的冬瓜</h3>
                <!-- 码云地址 -->
                <a href="#">gitee 地址</a>
                <!-- 文章和分类数量摘要 -->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>5</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="title">我的第一篇博客</h3>
            <!-- 发布时间 -->
            <div class="date">2023-4-23</div>
            <!-- 博客正文 -->
            <div class="content">
                <p>
                    今天是认真写博客的第一天. Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ab autem laborum repellendus iure placeat nesciunt soluta, alias ipsum fugiat numquam quidem consectetur. Culpa ipsum sequi sunt fugit in aliquid
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ab autem laborum repellendus iure placeat nesciunt soluta, alias ipsum fugiat numquam quidem consectetur. Culpa ipsum sequi sunt fugit in aliquid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sapiente optio saepe? Consequuntur exercitationem ut vel cum distinctio voluptatibus animi facere ullam molestiae est, facilis, debitis sed accusamus nihil quidem. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci sequi aperiam omnis reiciendis quasi cumque debitis incidunt corporis architecto placeat, ab iure ratione doloribus quod harum saepe assumenda cupiditate? Cupiditate?
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ab autem laborum repellendus iure placeat nesciunt soluta, alias ipsum fugiat numquam quidem consectetur. Culpa ipsum sequi sunt fugit in aliquid. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti dolores numquam excepturi quidem harum velit vel officiis officia deserunt exercitationem accusamus tempore optio unde natus itaque, totam sed perferendis. Inventore? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda laborum officia id, et ipsam magnam corrupti voluptatum unde harum recusandae itaque saepe, minima dolorum ea. Numquam officiis minus hic. Asperiores.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ab autem laborum repellendus iure placeat nesciunt soluta, alias ipsum fugiat numquam quidem consectetur. Culpa ipsum sequi sunt fugit in aliquid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur iure facere eveniet consectetur, mollitia aliquid nemo quod nobis, quia impedit non, quisquam laborum. Neque deleniti hic aspernatur beatae deserunt!
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ab autem laborum repellendus iure placeat nesciunt soluta, alias ipsum fugiat numquam quidem consectetur. Culpa ipsum sequi sunt fugit in aliquid. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur iure facere eveniet consectetur, mollitia aliquid nemo quod nobis, quia impedit non, quisquam laborum. Neque deleniti hic aspernatur beatae deserunt!
                </p>
            </div>
        </div>
    </div>
</body>
</html>